import React from 'react';
import { hashHistory } from 'react-router';
import { Breadcrumb, Button, Table, Input, Pagination, message, Row, Col, DatePicker, } from 'antd';
import $ from 'jquery';
import moment from 'moment';
import Config from '../../common/config';
const { RangePicker } = DatePicker;
const config = new Config();
const now = () => {
    return moment().format('YYYY-MM-DD HH:mm:ss')
};


export default class UserManage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userData: [],//用户列表
            usercount: 0,//用户列表条数
            pageindex: 1,//当前页码
            nickname: '',//筛选时输入的昵称
            dateStr: ['', ''],//最近登录时间日期字符串
            date: [undefined, undefined],//最近登录时间
            dateStr1: ['', ''],//创建时间日期字符串
            date1: [undefined, undefined],//创建时间
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        this.getUserList(1, false, false);
    }
    //获取用户列表
    getUserList(pageindex, logintime, createtime, loginstart, loginendtime, createstart, createendtime, nickName, ) {
        let url = `${config.wechat}/activitymanage/memberlist`;
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                pagesize: 10,
                pageindex,
                logintime,
                createtime,
                loginstart,
                loginendtime,
                createstart,
                createendtime,
                nickName,
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    for (let index = 0; index < data.data.length; index++) {
                        data.data[index].birthday = moment(data.data[index].birthday).format('YYYY-MM-DD');
                    }
                    this.setState({
                        userList: data.data,
                        usercount: data.count,
                    })
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //分页
    changePage(pageindex) {
        this.setState({
            pageindex
        });
        const { dateStr, dateStr1, nickname } = this.state;
        this.getUserList(pageindex, dateStr[0] !== '', dateStr1[0] !== '', dateStr[0], dateStr[1], dateStr1[0], dateStr1[1], nickname);
    }
    //筛选查询
    doSearch() {
        const { dateStr, dateStr1, nickname } = this.state;
        this.setState({
            pageindex: 1,
        });
        this.getUserList(1, dateStr[0] !== '', dateStr1[0] !== '', dateStr[0], dateStr[1], dateStr1[0], dateStr1[1], nickname);
    }



    //最近登录时间日期筛选方法
    changeDate(date, dateStr) {
        this.setState({
            dateStr,
            date,
        });
    }
    //创建时间日期筛选方法
    changeDate1(date1, dateStr1) {
        this.setState({
            dateStr1,
            date1,
        });
    }
    //将来时间禁用
    disabledDate(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }
    //输入昵称是调用方法
    handleInputNickname(e) {
        console.log(e.target.value);
        let nickname = e.target.value;
        this.setState({
            nickname,
        })
    }
    //查看
    look(record) {
        hashHistory.push({
            pathname: '/userdetails',
            state: JSON.stringify(record)
        })
    }

    render() {
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                width: 80,
            },
            {
                title: 'OpenID',
                dataIndex: 'openid',
                width: 200,
            }, {
                title: '昵称',
                dataIndex: 'nickName',
                width: 100,
            }, {
                title: '性别',
                dataIndex: 'sex',
                width: 80,
                render: text => <span>{text === 0 ? '男' : '女'}</span>
            }, {
                title: '身高',
                dataIndex: 'height',
                width: 80
            }, {
                title: '生日',
                dataIndex: 'birthday',
                width: 150,
            }, {
                title: '体重',
                width: 80,
                render: (text, record) => <span>{record.signintable == null ?0 :record.signintable.weight}</span>
            }, {
                title: '目标',
                dataIndex: 'target',
                width: 80
            }, {
                title: '异常饮食（一周）',
                dataIndex: 'foodrecord',
                width: 100
            }, 
            {
                title: '最近登录时间',
                width: 150,
                render: (text, record) => <span>{record.signintable == null ?moment().format('YYYY-MM-DD') :moment(record.signintable.updatedAt).format('YYYY-MM-DD')}</span>
                // render: (text, record) => <span>{moment(record.signintable.updatedAt).format('YYYY-MM-DD')}</span>
            }, {
                title: '操作',
                width: 150,
                render: (text, record) => (
                    <div>
                        <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.look.bind(this, record)}>详情</Button>
                    </div>
                )
            }
        ];
        return (
            <div className='goods-label clearfix'>
                {/*面包屑*/}
                < Breadcrumb separator=">" >
                    <Breadcrumb.Item>微信管理</Breadcrumb.Item>
                    <Breadcrumb.Item>脂玫乐小程序</Breadcrumb.Item>
                    <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                </Breadcrumb >
                <div style={{ marginTop: '40px' }} className="clearfix dataManage">
                    <Row>
                        <Col span={5} >
                            昵称: &nbsp;&nbsp;&nbsp;<Input placeholder="请输入昵称" style={{ width: '150px' }} onChange={this.handleInputNickname.bind(this)} />
                        </Col>
                        <Col span={7}>
                            最近登录时间:&nbsp;&nbsp;&nbsp;
                        <RangePicker placeholder={['请选择日期', '请选择日期']}
                                onChange={this.changeDate.bind(this)}
                                format='YYYY-MM-DD'
                                value={this.state.date}
                                style={{ width: '200px' }}
                                disabledDate={(val) => this.disabledDate(val)}
                            />
                        </Col>
                        <Col span={7}>
                            创建时间:&nbsp;&nbsp;&nbsp;
                        <RangePicker placeholder={['请选择日期', '请选择日期']}
                                onChange={this.changeDate1.bind(this)}
                                format='YYYY-MM-DD'
                                value={this.state.date1}
                                style={{ width: '200px' }}
                                disabledDate={(val) => this.disabledDate(val)}
                            />
                        </Col>
                        <Col span={5} ><Button type="primary" onClick={this.doSearch.bind(this)}>查询</Button></Col>
                    </Row>
                    <div className='allgoods-table clearfix' style={{ marginTop: '40px' }}>
                        <Table
                            rowKey="id"
                            columns={columns}
                            dataSource={this.state.userList}
                            pagination={false}
                            bordered
                        />
                    </div>

                </div>
                <div className='goods-label-let'>
                    <div className="floor-ppagi">
                        {
                            this.state.usercount === 0 ?
                                <p className="floor-ppagip">
                                    共{this.state.usercount}条记录
                            </p> :
                                <p className="floor-ppagip">
                                    当前显示
                                {10 * (this.state.pageindex - 1) + 1}—
                                {10 * this.state.pageindex < this.state.usercount ? 10 * this.state.pageindex : this.state.usercount}条记录，
                                共{this.state.usercount}条记录
                            </p>
                        }
                        <Pagination showQuickJumper current={this.state.pageindex} total={this.state.usercount || 1} defaultPageSize={10} onChange={this.changePage.bind(this)} />
                    </div>
                </div>
            </div>
        )
    }
}